@layout("/common/_vue_container.html"){
<div id="app" v-cloak v-loading="fullscreenLoading" style="height:100%;">
    <div class="main_content">
        <div v-loading="screenLoading">
            <div class="remind_title2">
                产品列表
                <el-button
                        type="primary"
                        size="small"
                        class="product-new-button"
                        v-on:click="toCateList"
                >
                    类别管理
                </el-button>
                <el-button
                        type="primary"
                        size="small"
                        class="product-new-button"
                        v-on:click="toNewPage"
                        icon="el-icon-plus"
                >
                    新增
                </el-button>

            </div>
            <el-form :inline="true" :model="queryContent" class="product-form-inline" size="mini">
                <el-form-item label="关键词" size="mini">
                    <el-input v-model="queryContent.keyword" placeholder="产品名称/产品买点" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="产品状态" size="mini">
                    <el-select v-model="queryContent.productStatus" placeholder="状态" class="product-form-item" size="mini">
                        <el-option label="新品" value="0"></el-option>
                        <!--<el-option label="力荐" value="1"></el-option>-->
                        <el-option label="热销" value="2"></el-option>
                        <el-option label="推荐" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="管理状态" size="mini">
                    <el-select v-model="queryContent.managerStatus" placeholder="状态" class="product-form-item"size="mini">
                        <el-option label="未审核" value="0"></el-option>
                        <el-option label="已审核" value="1"></el-option>
                        <el-option label="停用" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间范围" size="mini">
                    <div class="" class="product-form-item">
                        <el-date-picker
                                size="mini"
                                v-model="queryContent.date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item size="mini">
                    <el-button type="primary" v-on:click="loadProductList" size="mini">查询</el-button>
                    <el-button v-on:click="resetQuery" size="mini">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table ref="singleTable" :data="productData" style="width: 100%">
                <el-table-column property="productName" label="产品名称" width="">
                    <template scope="scope">
                        <a href="javascript:void(0)" v-on:click="toProductDetail(scope.row.id)">{{scope.row.productName}}</a>
                    </template>
                </el-table-column>
                <el-table-column property="onlineDate" label="上线时间" sortable>
                </el-table-column>
                <el-table-column property="productFlag" label="产品状态" sortable>
                    <template scope="scope">
                        {{productFilter(scope.row.productFlag)}}
                    </template>
                </el-table-column>
                <el-table-column property="manageFlag" label="管理状态" sortable>
                    <template scope="scope">
                        {{manageFilter(scope.row.manageFlag)}}
                    </template>
                </el-table-column>
                <el-table-column property="downloadFlag" label="下载状态" sortable>
                    <template scope="scope">
                        {{downloadFilter(scope.row.downloadFlag)}}
                    </template>
                </el-table-column>
                <el-table-column property="cateList" label="产品类别" sortable>
                    <template scope="scope">
                        <span v-for="(item,index) in scope.row.cateList" key="item.id">
                            <span v-if="index == scope.row.cateList.length - 1">
                                {{item.name}}
                            </span>
                            <span v-else="index == scope.row.cateList.length - 1">
                                {{item.name}},
                            </span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column property="realTimePv" label="当日pv" sortable>
                    <template scope="scope">
                        <a href="javascript:void(0)" v-on:click="toProductPv(scope.row.id)">{{scope.row.realTimePv}}</a>
                    </template>
                </el-table-column>
                <el-table-column property="realTimeUv" label="当日uv" sortable>
                </el-table-column>
                <el-table-column property="orderNum" label="排序值" sortable>
                    <template slot-scope="{row,$index}">
                        <div  v-on:dblclick="{{changeNum($index)}}">
                            <el-input v-if="editable[$index]" v-model='orderNumTemp' v-on:blur="{{putOrderNum($index)}}"></el-input>
                            <span v-else="editable[$index]">{{row.orderNum}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="500">
                    <template scope="scope">
                        <el-button size="small"
                                   v-on:click=toEditProduct(scope.row.id)>编辑
                        </el-button>
                        <el-button size="small"
                                   v-on:click=changeProductStatusDialog(scope.row.id,scope.row.productFlag)>产品状态
                        </el-button>
                        <el-button size="small"
                                   v-on:click=changeManageStatusDialog(scope.row.id,scope.row.manageFlag)>管理状态
                        </el-button>
                        <el-button size="small"
                                   v-on:click=changeDownloadStatusDialog(scope.row.id,scope.row.downloadFlag)>下载状态
                        </el-button>
                        <el-button size="small"
                                   v-on:click=changeCateDialog(scope.row.id,scope.row.cateList)>类别管理
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template>
                <el-pagination
                        background
                        v-on:size-change="handleSizeChange"
                        v-on:current-change="handleCurrentChange"
                        :current-page.sync="pageNo"
                        :page-sizes="[20, 50, 100, 200]"
                        :page-size="pageSize"
                        layout="total,sizes,prev, pager, next,jumper"
                        :total="total">
                </el-pagination>
            </template>
        </div>
    </div>
    <el-dialog title="更改产品状态" :visible.sync="dialogProductVisible">
        <el-select v-model="productStatus" placeholder="请选择">
            <el-option label="新品" value="0"></el-option>
            <!--<el-option label="力荐" value="1"></el-option>-->
            <el-option label="热销" value="2"></el-option>
            <el-option label="推荐" value="3"></el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="dialogProductVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="productConfirmChange(productId,productStatus)">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="更改管理状态" :visible.sync="dialogManageVisible">
        <el-select v-model="manageStatus" placeholder="请选择">
            <el-option label="未审核" value="0"></el-option>
            <el-option label="已审核" value="1"></el-option>
            <el-option label="停用" value="2"></el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="dialogManageVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="manageConfirmChange(productId,manageStatus)">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="更改下载状态" :visible.sync="dialogDownloadVisible">
        <el-select v-model="downloadStatus" placeholder="请选择">
            <el-option label="不可下载" value="0"></el-option>
            <el-option label="可下载" value="1"></el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="dialogDownloadVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="downloadConfirmChange(productId,downloadStatus)">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="选择类别" :visible.sync="dialogCateVisible">
        <el-select v-model="selectCateId" multiple placeholder="请选择">
            <el-option
                    v-for="item in allCate"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="dialogCateVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="cateConfirmChange(productId)">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="${ctxPath}/static/modular/cash/product/product_list.js"></script>
@}

